<template>
  <div id="bar" style="width: 100%;height:100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      imgList : [
        '//img.isqqw.com/profile/upload/2023/12/14/55b457c4-348e-4bd6-b7c7-b49ab0550672.png',
        '//img.isqqw.com/profile/upload/2023/12/13/37717ebc-8cc5-481e-b446-ebbb352b0bca.png',
        '//img.isqqw.com/profile/upload/2023/12/13/2b647159-3088-4dc8-8c85-5d60d40895cd.png'
      ]
    };
  },
  mounted() {
    this.show();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.echartsInstance.resize();
    },
    show() {
      this.charts = echarts.init(document.getElementById('bar'))
      var option = {

        tooltip: {
          show: true,
          trigger: 'item',
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontFamily: 'SourceHanSansCN-Normal',
            fontSize: 20,
          },
        },
        legend: {
          show: false,
        },
        grid: {
          left: '15%',
          right: '5%',
          top: '5%',
          bottom: '5%',
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: 'value',
            show: false,
            axisLine:{     //x轴坐标轴，false为隐藏，true为显示
              show:false
            },
          },
        ],
        yAxis: [
          {
            show: true,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            type: 'category',
            axisTick: {
              show: false,
            },
            inverse: true,
            data:[1,2,3,4,5,6,7,8,9,10],
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: 'rgba(255, 255, 255, 1)',
                fontFamily: 'SourceHanSansCN-Normal',
                fontSize: 10,

              },
              formatter: function (params) {
                var index = params;
                if (index - 1 < 3) {
                  return ['{a' + index + '|}'].join('\n');
                } else {
                  return ['{b|' + index + '}'].join('\n');
                }
              },
              rich: {
                a: {
                  padding: [0, 0, 35, 10]
                },
                a1: {
                  color: '#fff',
                  backgroundColor: {
                    image: this.imgList[0],
                  },
                  width: 25,
                  height: 30,
                  align: 'center',
                  borderRadius: 2,
                },
                a2: {
                  color: '#fff',
                  backgroundColor: {
                    image: this.imgList[1],
                  },
                  width: 25,
                  height: 30,
                  align: 'center',
                  borderRadius: 2,
                },
                a3: {
                  color: '#fff',
                  backgroundColor: {
                    image: this.imgList[2],
                  },
                  width: 25,
                  height: 30,
                  align: 'center',
                  borderRadius: 2,
                },
                b: {
                  // 圆圈样式
                  backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(184, 239, 255, 1)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(112, 219, 163, 1)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                  color: "rgba(21, 140, 128, 1)",
                  width: 24,
                  height: 20,
                  padding: [5, 0, 0, 0],
                  borderRadius: 30,
                  fontSize: 15,
                  align: 'center',
                  fontWeight: 500,
                },
              },
            },
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            position: "right",
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: 44,
              margin: 0,       //刻度标签与轴线之间的距离
              show: true,
              textStyle: {
                color: 'rgba(255, 255, 255, 1)',
                fontFamily: 'SourceHanSansCN-Normal',
                fontSize: 15,
              },
              formatter: function (value) {
                return value + '%';
              },
            },
            data: [96,93,90,89,89,89,88,87,86,84],
          },
        ],
        series: [
          {
            show: true,
            name: '',
            type: 'bar',
            data:[{ name: '学生：101', value: 96 }, { name: '学生：128', value: 93 }, { name: '学生：119', value: 90 },
              { name: '学生：152', value: 89 }, { name: '学生：131', value: 89 }, { name: '学生：342', value: 89 },
              { name: '学生：542', value: 88 }, { name: '学生：644', value: 87 },{ name: '学生：343', value: 86 },
              { name: '学生：243', value: 84 }],
            barWidth: 10, // 柱子宽度
            showBackground: true,
            backgroundStyle: {
              color:{
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(28, 114, 99, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(21, 140, 128, 1)",
                  },
                ],
              }
            },
            label: {
              show: true,
              offset: [5, -20],
              color: 'rgba(255, 255, 255, 1)',
              fontFamily: 'SourceHanSansCN-Normal',
              fontSize: 15,
              fontWeight: 500,
              position: 'left',
              align: 'left',
              formatter: function (params) {
                return params.data.name;
              }
            },
            itemStyle:{
              barBorderRadius: [10, 10, 10, 10],
              color:{
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(115, 174, 155, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(115, 174, 155, 1)",
                  },
                ],
              }
            }
          },
          {
            name: "外圆",
            type: "scatter",
            emphasis: {
              scale: false,
            },
            symbol: "rect",
            symbolSize: [3,20],// 进度条白点
            itemStyle: {
              show: true,
              barBorderRadius: [10, 10, 10, 10],
              color: '#FFF',
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 5,
              borderWidth: 1,
              opacity: 1,
            },
            z: 2,
            data: [{ name: '学生：101', value: 96 }, { name: '学生：128', value: 93 }, { name: '学生：119', value: 90 },
              { name: '学生：152', value: 89 }, { name: '学生：131', value: 89 }, { name: '学生：342', value: 89 },
              { name: '学生：542', value: 88 }, { name: '学生：644', value: 87 },{ name: '学生：343', value: 86 },
              { name: '学生：243', value: 84 }],
            animationDelay: 500,
          },
        ],
        dataZoom: [
          {
            yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 10 // 展示到第几个。
          }
        ]
      };
      setInterval(() => {
        if (option.dataZoom[0].endValue >= 7) {
          option.dataZoom[0].endValue = 14
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        bulletin10Chart.setOption(option)
      }, 4000)

      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.list_Wrap {
  height: 100%;
  overflow: hidden;
  :deep(.kong)   {
    width: auto;
  }
}

.sbtxSwiperclass {
  .img_wrap {
    overflow-x: auto;
  }

}

.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;

  .searchform {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    .searchform_item {
      display: flex;
      justify-content: center;
      align-items: center;

      label {
        margin-right: 10px;
        color: rgba(255, 255, 255, 0.8);
      }

      button {
        margin-left: 30px;
      }

      input {}
    }
  }

  .img_wrap {
    display: flex;
    // justify-content: space-around;
    box-sizing: border-box;
    padding: 0 0 20px;
    // overflow-x: auto;

    li {
      width: 105px;
      height: 137px;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      // background: #84ccc9;
      // border: 1px solid #ffffff;
      overflow: hidden;
      flex-shrink: 0;
      margin: 0 10px;

      img {
        flex-shrink: 0;
      }
    }




  }

  .noData {
    width: 100%;
    line-height: 100px;
    text-align: center;
    color: rgb(129, 128, 128);

  }
}
</style>